<template>
  <div class="orderConfirm">
    <!-- 顶部导航栏 -->
    <van-sticky :offset-top="0">
      <van-nav-bar
        title="订单确认"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </van-sticky>
    <!-- 服务地址 -->
    <!-- {{address}} -->
    <div @click="handlerDetails" class="address">
      <div>服务地址</div>
      <!-- {{defaultAddress}} -->
        <van-row v-if="defaultAddress">
          <van-col span="8">姓名:{{defaultAddress.username}}</van-col>
          <van-col span="16">电话:{{defaultAddress.telephone}}</van-col>
        </van-row>
      <div v-if="defaultAddress">地址:{{defaultAddress.province+defaultAddress.city+defaultAddress.area+defaultAddress.address}}</div>
    </div>
    <!-- 订单详情 -->
    <div class="details">
      <div>订单详情</div>
      <van-row v-for="(item,index) in Array.from(orderLines.values())" :key="index">
          <van-col span="8">{{item.productName}}</van-col>
          <van-col span="8">￥{{item.price}}</van-col>
          <van-col span="8">x{{item.number}}</van-col>
      </van-row>
      <div>￥{{total}}</div>
    </div>
    <!-- 提交按钮 -->

    <div class="confirm_btn" @click="confirmData">确认提交</div>

    <!-- 动作面板 -->
    <van-action-sheet v-model="addressShow" title="标题">
      <van-address-list
        v-model="chosenAddressId"
        :list="addressList"
        default-tag-text="默认"
        @add="addressShow=false"
         add-button-text='确定'
      />
    </van-action-sheet>
  </div>
</template>

<script>
import { post_json } from "@/http/axios";
import { mapState, mapActions, mapGetters, mapMutations } from "vuex";
import { Dialog, Toast } from "vant";
export default {
  data() {
    return {
      addressShow:false,
      chosenAddressId:null
    };
  },
  created() {
    // 获取用户个人信息
    this.getUserInfo();
    this.findAllAddress(this.userInfo.id);
  },
  computed: {
    ...mapState('address',['address']),
    ...mapState('user',['userInfo']),
    ...mapState('shopcart',['orderLines']),
    ...mapGetters('shopcart',['total']),
    defaultAddress(){
      return this.address.filter(item=>{
        this.chosenAddressId=item.id;
        return item.isDefault==1; 
      })[0];
    },
    addressList(){
      this.address.forEach(item => {
        item.name = item.username,
        item.tel = item.telephone,
        item.address=item.province+item.city+item.area+item.address
      });
      return this.address
    }
  },
  methods: {
    ...mapActions('address',['findAllAddress']),
    ...mapActions('user',['getUserInfo']),
      ...mapMutations('shopcart',['addShopCar']),
    //弹出面板
    handlerDetails(){
      this.addressShow=true
    },
    // 确定提交
    confirmData() {
      let formDate={
        addressId: this.address.id,
        customerId: this.userInfo.id,
        orderLines: Array.from(this.orderLines.values())
      };
      post_json('/order/submitOrder',formDate).then(res=>{
        console.log(res);
        Toast.success(res.data.message);
        this.$router.push('order');
        this.clearShopCar()
      })
    },

    // 返回上一级页面
    onClickLeft() {
      this.$router.go(-1);
      console.log();
      setTimeout(() => {
        this.$store.state.shopcart.orderLines.clear();
      }, 500);
    },
  },
};
</script>

<style scoped>
/* 提交按钮 */
.confirm_btn {
  width: 53%;
  height: 40px;
  background-image: linear-gradient(to right, #7579ff, #bf73ff);
  text-align: center;
  color: #fff;
  border-radius: 22px;
  line-height: 40px;
  margin: 0 auto;
  margin-top: 2em;
  cursor: pointer;
}
.van-icon-edit {
  display: none;
}
.address {
  border-radius: 5px;
  box-shadow: 0 0 5px 5px #999;
  margin-top: 10px;
  padding: 10px;
}
.details{
  border-radius: 5px;
  box-shadow: 0 0 5px 5px #999;
  margin-top: 10px;
  padding: 10px;
}
.order {
  border-radius: 5px;
  box-shadow: 0 0 5px 5px #999;
  margin-top: 10px;
  padding: 10px;
}
/* 充值 */
.cz {
  height: 80px;
  text-align: center;
}
</style>